<script setup>
import {onMounted, reactive, ref} from "vue";
import bgImg from "@/assets/images/bg.jpg"
import lfImg from "@/assets/images/left.jpg"
import {useRouter} from 'vue-router'
import {getLoginCode, loginAdmin} from '@/api/admin.js'
import {ElMessage} from "element-plus";
import {useAdminStore} from "@/stores/admin.js";
import {registerRouter} from "@/router/index.js";

const admin = useAdminStore();

const getCode = (async () => {
  //获去验证码
  const res = await getLoginCode()
  if (res.code !== 200) {
    ElMessage({
      type: 'error',
      message: res.msg,
    })
    return
  }
  code.value = res.data.code
  form.sign = res.data.sign
})

onMounted(() => {
  getCode()
})

const router = useRouter()

const code = ref('')

const app_title = import.meta.env.VITE_APP_NAME

const isLogin = ref(false);

//登录表单
const form = reactive({
  account: '',
  password: '',
  code: '',
  sign: ''
})

//登录事件
const login = async () => {
  isLogin.value = true;
  const {data, code, msg} = await loginAdmin(form)
  if (code !== 200) {
    ElMessage.error(msg)
    await getCode()
    isLogin.value = false;
    return
  }
  setTimeout(() => {
    ElMessage.success('登录成功')
    isLogin.value = false;
    //注册一次菜单用于初始化菜单 后续全在main.js中注册
    registerRouter(data.menus)
    admin.setAdmin(data)
    router.replace('/')
  }, 500)
}
</script>

<template>
  <div class="app" :style="{backgroundImage: `url(${bgImg})`}">
    <el-image class="left-logo"
              :src="lfImg"
              fit="cover"></el-image>
    <el-card class="loginForm">
      <template #header>
        <div class="title">
          {{ app_title }}
        </div>
      </template>
      <el-form label-position="top">
        <el-form-item label="账号">
          <el-input v-model="form.account" placeholder="请输入账号"></el-input>
        </el-form-item>

        <el-form-item label="密码">
          <el-input v-model="form.password" type="password" show-password placeholder="请输入密码"></el-input>
        </el-form-item>

        <el-form-item label="验证码">
          <el-input v-model="form.code" placeholder="请输入验证码">
            <template #suffix>
              <div class="code" @click="getCode">
                {{ code }}
              </div>
            </template>
          </el-input>
        </el-form-item>

        <div class="action">
          <el-button type="primary" @click="login" :loading="isLogin">立即登录</el-button>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
@media(max-width: 650px) {
  .left-logo {
    display: none;
  }
}

.app {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-position: center;
  background-size: cover;

  .left-logo {
    width: 350px;
    height: 400px;
    opacity: .9;
  }

  .loginForm {
    min-width: 350px;
    width: 350px;
    height: 400px;
    background-color: #B2C8DF;

    .title {
      display: flex;
      justify-content: center;
      font-weight: bold;
      font-size: 25px;
      overflow: hidden;
    }

    .action {
      display: flex;
      justify-content: center;
    }

    .code {
      color: red;
      font-size: 20px;
      font-weight: bold;
      cursor: pointer;
    }
  }
}
</style>